<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:with="title='文章管理',active='article'">
<header th:replace="back/header::headerFragment(${title},${active})"></header>
    <meta th:name="_csrf" th:content="${_csrf.token}"/>
    <!-- 默认的header name是X-CSRF-TOKEN -->
    <meta th:name="_csrf_header" th:content="${_csrf.headerName}"/>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!---->
    <link href="https://cdn.bootcss.com/bootstrap-switch/3.3.4/css/bootstrap3/bootstrap-switch.min.css"
          rel="stylesheet">

    <script src="https://cdn.bootcss.com/jquery/2.2.2/jquery.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
            integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
            crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/bootstrap-switch/3.3.4/js/bootstrap-switch.min.js"></script>
<style>
    .switch {
        width: 57px;
        height: 28px;
        position: relative;
        border: 1px solid #dfdfdf;
        background-color: #fdfdfd;
        box-shadow: #dfdfdf 0 0 0 0 inset;
        border-radius: 20px;
        background-clip: content-box;
        display: inline-block;
        -webkit-appearance: none;
        user-select: none;
        outline: none;
    }

    .switch:before {
        content: '';
        width: 26px;
        height: 26px;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 20px;
        background-color: #fff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    }

    .switch:checked {
        border-color: #64bd63;
        box-shadow: #64bd63 0 0 0 16px inset;
        background-color: #64bd63;
    }

    .switch:checked:before {
        left: 30px;
    }

    .switch.switch-anim {
        transition: border cubic-bezier(0, 0, 0, 1) 0.4s, box-shadow cubic-bezier(0, 0, 0, 1) 0.4s;
    }

    .switch.switch-anim:before {
        transition: left 0.3s;
    }

    .switch.switch-anim:checked {
        box-shadow: #64bd63 0 0 0 16px inset;
        background-color: #64bd63;
        transition: border ease 0.4s, box-shadow ease 0.4s, background-color ease 1.2s;
    }

    .switch.switch-anim:checked:before {
        transition: left 0.3s;
    }
    .topbar{
        height: 70px;
    }
</style>
<body class="fixed-left">
<div id="wrapper">
    <div th:replace="back/header::header-body"></div>
    <div class="content-page">
        <div class="content">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <h4 class="page-title">文章管理</h4>
                    </div>
                    <div class="col-md-12">
                        <table class="table table-striped table-bordered">
                            <thead>
                            <tr>
                                <th width="35%">文章标题</th>
                                <th width="15%">发布时间</th>
                                <th>浏览量</th>
                                <th>所属分类</th>
                                <th>开启评论</th>
                                <th>是否推荐</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <th:block th:each="article : ${articles}">
                                <tr th:id="${article.id}">
                                    <td>
                                        <a th:href="@{'/article/'+${article.id}}" th:text="${article.title}" target="_blank"></a>
                                    </td>
                                    <td><th:block th:text="${commons.dateFormat(article.created)}"/></td>
                                    <td><th:block th:text="${article.getStatistic().getHits()}"/></td>
                                    <td><th:block th:text="${article.categories}"/></td>

                                    <td>
                                        <input th:if="${article.allowComment}" class="switch switch-anim" onchange="checkNum()" th:onclick="sendAjax([[${article.allowComment}]],[[${article.id}]])"
                                               type="checkbox" checked/>
                                        <input th:if="${not article.allowComment}" class="switch switch-anim" onchange="checkNum()" th:onclick="sendAjax([[${article.allowComment}]],[[${article.id}]])"
                                               type="checkbox"/>
                                    </td>

                                    <td>
                                        <input th:if="${article.getRecommend()==1}" class="switch switch-anim" onchange="checkNum()" th:onclick="sendAjax2([[${article.recommend}]],[[${article.id}]])"
                                               type="checkbox" checked/>
                                        <input th:if="${article.getRecommend()==0}" class="switch switch-anim" onchange="checkNum()" th:onclick="sendAjax2([[${article.recommend}]],[[${article.id}]])"
                                               type="checkbox"/>
                                    </td>

                                    <td>
                                        <a th:href="@{'/admin/toEditArticle/'+${article.id}}"
                                           class="btn btn-primary btn-sm waves-effect waves-light m-b-5">
                                           <i class="fa fa-edit"></i> <span>编辑</span></a>
                                        <a href="javascript:void(0)" th:onclick="'delArticle('+${article.id}+');'"
                                           class="btn btn-danger btn-sm waves-effect waves-light m-b-5">
                                            <i class="fa fa-trash-o"></i> <span>删除</span></a>
                                        <a onclick="f1()" class="btn btn-warning btn-sm waves-effect waves-light m-b-5" href="javascript:void(0)">
                                            <i class="fa fa-rocket"></i> <span>预览</span></a>
                                    </td>
                                </tr>
                            </th:block>

                            </tbody>
                        </table>

<!--                        分页-->
                        <div class="am-pagination">
                            <nav aria-label="Page navigation">

                                <!--                分成三个ul class="pagination" ，一个是上一页 ，一个是th：each遍历 ，一个是下一页-->
                                <ul class="pagination">

                                    <li th:if="${pageInfo.pageNum!=1}">
                                        <a th:href="@{'/admin/toArticleList/'+${pageInfo.pageNum-1}}" aria-label="Previous">
                                            <span aria-hidden="true">&laquo;</span>
                                        </a>
                                    </li>
                                    <li th:if="${pageInfo.pageNum==1}" class="disabled">
                                        <a href="#" aria-label="Previous">
                                            <span aria-hidden="true">&laquo;</span>
                                        </a>
                                    </li>
                                </ul>

                                <ul class="pagination" th:each="index:${#numbers.sequence(1, pageInfo.getPages())}">
                                    <li th:if="${pageInfo.pageNum==index}" class="active"><a th:href="@{'/toArticleList/'+${index}}" th:text="${index}"></a></li>
                                    <li th:if="${pageInfo.pageNum!=index}"><a th:href="@{'/admin/toArticleList/'+${index}}" th:text="${index}"></a></li>

                                </ul>

                                <ul class="pagination">
                                    <li th:if="${pageInfo.pageNum!=pageInfo.pages}">
                                        <a th:href="@{'/admin/toArticleList/'+${pageInfo.pageNum+1}}" aria-label="Next">
                                            <span aria-hidden="true">&raquo;</span>
                                        </a>
                                    </li>
                                    <li th:if="${pageInfo.pageNum==pageInfo.pages}" class="disabled">
                                        <a href="#" aria-label="Next">
                                            <span aria-hidden="true">&raquo;</span>
                                        </a>
                                    </li>
                                </ul>
                            </nav>
                        </div>

                    </div>
                </div>
                <div th:replace="back/footer :: footer-content"></div>
            </div>
        </div>
    </div>
</div>
<div th:replace="back/footer :: footer"></div>
<script type="text/javascript">
    function delArticle(id) {
        // 获取<meta>标签中封装的_csrf信息
        var token = $("meta[name='_csrf']").attr("content");
        var header = $("meta[name='_csrf_header']").attr("content");
        if(confirm('确定删除该文章吗?')){
            $.ajax({
                type:'post',
                url : '/admin/deleteArticle',
                data: {id:id},
                dataType: 'json',
                beforeSend : function(xhr) {
                    xhr.setRequestHeader(header, token);
                },
                success: function (result) {
                    if (result && result.success) {
                        window.alert("文章删除成功");
                        window.location.reload();
                    } else {
                        window.alert(result.msg || '文章删除失败')
                    }
                }
            });
        }
    }

    function checkNum() {
        if ($('.switch-anim').prop('checked')) {
            console.log("选中");
        } else {
            console.log("没选中");
        }
    }

    function f1() {
        alert('该功能暂未实现');
    }

    /**
     *发送Ajax,修改是否开启评论
     */
    function sendAjax(allow,id) {
        var xmlhttp;
        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {// code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        // alert('send')
        xmlhttp.open("GET", "/article/updateAllowComment?allow=" + allow+"&id="+id, true);
        xmlhttp.send();

        //4.接受并处理来自服务器的响应结果
        //获取方式 ：xmlhttp.responseText
        //当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange。
        //接收服务器端的响应(readyState=4表示请求已完成且响应已就绪 status=200表示请求响应一切正常)
        xmlhttp.onreadystatechange = function () {
            //判断readyState就绪状态是否为4，判断status响应状态码是否为200
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                //获取服务器的响应结果
                var responseText = xmlhttp.responseText;
                // alert(responseText);


            }

        }
    }

    /**
     *修改是否推荐
     */
    function sendAjax2(recommend,id) {
        var xmlhttp;
        if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {// code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        // alert('send')
        xmlhttp.open("GET", "/article/updateRecommend?recommend=" + recommend+"&id="+id, true);
        xmlhttp.send();

        xmlhttp.onreadystatechange = function () {
            //判断readyState就绪状态是否为4，判断status响应状态码是否为200
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                //获取服务器的响应结果
                var responseText = xmlhttp.responseText;
                // alert(responseText);

            }

        }
    }


</script>
</body>
</html>